<!--  -->
<template>
  <div class="box">
    <div class="box1">
      <el-button type="success" plain @click="handleAddClick">增加</el-button>

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
        <el-table-column prop="sangping" label="商品" width="180">
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <!-- //编辑 -->
            <el-button
              type="primary"
              @click="handleEditClick(scope.$index, scope.row)"
              size="mini"
            >
              <el-button type="primary" icon="el-icon-edit" circle></el-button>
            </el-button>
            <!-- //删除 -->
            <el-button
              type="danger"
              size="mini"
              @click="handleDelClick(scope.$index, scope.row)"
            >
              <el-button type="danger" icon="el-icon-delete" circle></el-button>
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
        title="修改用户"
        :visible.sync="editBox"
        width="50%"
        :before-close="handleClose"
      >
        <el-form ref="form" label-width="100px" v-model="user">
          <el-form-item label="时间:">
            <el-input
              placeholder="请输入时间"
              maxlength="50"
              v-model="user.date"
            ></el-input>
          </el-form-item>
          <!--                <el-form-item label="时间:">-->
          <!--                    <el-date-picker-->
          <!--                            v-model = "user.date"-->
          <!--                            type="date"-->
          <!--                            placeholder="选择日期">-->
          <!--                    </el-date-picker>-->
          <!--                </el-form-item>-->
          <el-form-item label="名字:">
            <el-input
              placeholder="请输入名字"
              maxlength="50"
              v-model="user.name"
            ></el-input>
          </el-form-item>
          <el-form-item label="请输入商品:">
            <el-input
              placeholder="商品"
              maxlength="50"
              v-model="user.sangping"
            ></el-input>
          </el-form-item>
          <el-form-item label="地址:">
            <el-input
              placeholder="请输入地址"
              maxlength="50"
              v-model="user.address"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleEditUser">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog
        title="添加用户"
        :visible.sync="addBox"
        width="50%"
        :before-close="handleClose"
      >
        <el-form ref="form" label-width="100px" v-model="addUserData">
          <el-form-item label="时间:">
            <el-date-picker
              v-model="addUserData.date"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="名字:">
            <el-input
              placeholder="请输入名字"
              maxlength="50"
              v-model="addUserData.name"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品:">
            <el-input
              placeholder="请输入商品"
              maxlength="50"
              v-model="addUserData.sangping"
            ></el-input>
          </el-form-item>
          <el-form-item label="地址:">
            <el-input
              placeholder="请输入地址"
              maxlength="50"
              v-model="addUserData.address"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleAddUser">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="box2">
      <div></div>
      <div></div>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="20"
        >
          <!-- pvData.length -->
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TableData",
  data() {
    return {
      //分页
      currentPage4: 1, //初始化页
      pagesize: 5,
      total: 0,
      searchContent: "",
      tableData: [
        {
          date: "2016-03-02",
          name: "张三",
          sangping: "三工",
          address: "广州市天河区金沙江路 1518 弄",
        },
        {
          date: "2016-04-06",
          name: "李四",
          sangping: "四工",
          address: "广州市黄埔区金沙江路 1517 弄",
        },
        {
          date: "2016-08-01",
          name: "王五",
          sangping: "伍工",
          address: "北京市金沙江路 1519 弄",
        },
        {
          date: "2016-06-03",
          name: "赵六",
          sangping: "六工",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      addBox: false,
      editBox: false,
      user: {},
      editIndex: "",
      addUserData: {
        date: "",
        name: "",
        address: "",
      },
    };
  },
  methods: {
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //编辑
    handleEditClick(index, row) {
      this.editBox = true;
      this.user = row;
      this.editIndex = index;
    },

    // eslint-disable-next-line no-unused-vars
    handleDelClick(index, row) {
      this.$confirm("此操作将删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.tableData.splice(index, 1);
        this.$message({
          showClose: true,
          message: "删除成功",
          type: "success",
        });
      });
    },
    handleClose(done) {
      done();
    },
    handleEditUser() {
      this.tableData.splice(this.editIndex, 1, this.user);
      this.$message({ showClose: true, message: "修改成功", type: "success" });
      this.editBox = false;
    },
    handleAddClick() {
      this.addBox = true;
    },
    handleAddUser() {
      let strDate = dateFormat("YYYY-mm-dd", this.addUserData.date);
      this.addUserData.date = strDate;
      this.tableData.push(this.addUserData);
      this.addBox = false;
      this.addUserData = {};
      this.$message({ showClose: true, message: "添加成功", type: "success" });
    },
  },
};

function dateFormat(fmt, date) {
  let ret;
  const opt = {
    "Y+": date.getFullYear().toString(), // 年
    "m+": (date.getMonth() + 1).toString(), // 月
    "d+": date.getDate().toString(), // 日
    "H+": date.getHours().toString(), // 时
    "M+": date.getMinutes().toString(), // 分
    "S+": date.getSeconds().toString(), // 秒
    // 有其他格式化字符需求可以继续添加，必须转化成字符串
  };
  for (let k in opt) {
    ret = new RegExp("(" + k + ")").exec(fmt);
    if (ret) {
      fmt = fmt.replace(
        ret[1],
        ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
      );
    }
  }
  return fmt;
}
</script>

<style scoped>
</style>
<style lang='scss' scoped>
.box {
  width: 100%;
  height: 80%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.box1 {
  width: 100%;
  // flex: 1;
  height: 500px;
  overflow-x: hidden;
  background: rgb(255, 255, 255);
}
.box2 {
  // margin-top: 100px;
  width: 100%;
  height: 50px;
  background: rgb(245, 255, 192);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>